<template>
  <a-drawer
    :title="user.u_name + '的标签'"
    v-model:visible="visible"
    closable="true"
    placement="right"
  >
    <div>
      <a-popconfirm title="确定要修改标签?" @confirm="setTabs" placement="left">
        <a-button type="primary">确定</a-button>
      </a-popconfirm>
    </div>
    <a-checkbox-group v-model:value="tabIds">
      <div v-for="t in tabs" :key="t.ut_id">
        <a-checkbox :value="t.ut_id">{{ t.ut_name }}</a-checkbox>
      </div>
    </a-checkbox-group>
  </a-drawer>
</template>
<script>
import { ref } from "vue";
import { get, post, tip } from "@/common";
export default {
  setup() {
    const visible = ref(false);
    const user = ref({});
    const tabs = ref({});
    const tabIds = ref([]);

    const open = (uObj) => {
      user.value = uObj;
      get("/buser/usermanage/queryTabs?u_id=" + user.value.u_id).then((res) => {
        tabs.value = res.data;
        const temp = [];
        console.log("total tab:" + tabs.value.length);
        for (let i = 0; i < tabs.value.length; i++) {
          const tab = tabs.value[i];
          if (tabs.value[i].has) {
            temp.push(tabs.value[i].ut_id);
          }
        }
        tabIds.value = temp;
      });
      visible.value = true;
    };

    const setTabs = () => {
      const userTabData = {
        u_id: user.value.u_id,
        ut_list: tabIds.value,
      };

      post("/buser/usermanage/setUserTab", userTabData).then((res) => {
        tip.success("标签设置成功!");
      });
    };

    return {
      visible,
      user,
      tabs,
      tabIds,
      open,
      setTabs,
    };
  },
};
</script>